<template>
  <div>
    <Header class="heanderNav">
       <a @click="updateinfo" v-if="isDisabled"  class="heanderNav">编辑</a>
       <a @click="updateSave" v-if="!isDisabled"  class="heanderNav save">保存</a>
    </Header>
      <div class="img_blur">
         <div class="img_blur_bg" :style="'background:url('+updateForm.userIcon+') no-repeat;'" alt=""></div>
         <p class="center">
           <img class="touxiang" :src="updateForm.userIcon">
           <img class="camera" src="../../assets/img/camera.png" alt="" v-if="!isDisabled" @click="uploadPic">
           <label for="input_file" class="camera_input" v-if="!isDisabled"></label>
           <input type="file" id="input_file" @change="fileChange" name="file" v-if="!isDisabled" ref="file" accept="image/png,image/gif,image/jpeg" style="disabled:none;">
         </p>
      </div>
      <group style="margin-top:-20px;">
          <x-input title="昵称" :disabled="isDisabled" label-width="80px" v-model="updateForm.userNickname" required placeholder="请输入昵称"></x-input>
          <radio title="性别" :disabled="isDisabled" :options="sexOptions" v-model="updateForm.userSex" ></radio>
          <x-textarea title="简介" :disabled="isDisabled" show-counter :max="100" v-model="updateForm.userCustominfo6"></x-textarea>
      </group>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from '@/components/commons/header/header'
import Footer from '@/components/commons/footer/footer'
import USER from '@/utils/user'
import userController from '@/api/userController/index'
import uploadFileApi from '@/api/uploadFile'
import {mapActions} from 'vuex'
import axios from 'axios'
  export default {
    name: 'userinfo',
    data () {
      return {
        updateForm: {
          userNickname: null,
          userSex: null,
          userCustominfo6: null, //简介
          userIcon:null,
        },
        uploadUrl:process.env.BASE_API+"/uploadImageController/uploadFile.jhtml",
        files: [],
          edit: false,
          cropper: false,
        userInfo:null,
        isDisabled: true,
        sexOptions: [{
          key: 1,
          value: '男'
        }, {
          key: 0,
          value: '女'
        }]
      }
    },
    created(){
      this.getLoginInfo();
    },
    components: {Header,Footer},
    methods: {
      ...mapActions([
        'setUserInfo'
      ]),
      getLoginInfo(){ //获取登录信息,如果登录，重定向至登录页面
        var loginInfo = USER.getUserInfo();
        this.userInfo = loginInfo;
        this.updateForm.userNickname = loginInfo.userNickname;
        this.updateForm.userSex = loginInfo.userSex;
        this.updateForm.userCustominfo6 = loginInfo.userCustominfo6;
        this.updateForm.userIcon = loginInfo.userIcon;
        if(loginInfo.isLogin==1){ //0已登录 1未登录
          this.$router.push({name:'login'})
        }
      },
      updateinfo () {
        this.isDisabled = false;

      },
      uploadPic () {},
      updateSave () {
        var _this = this;
        this.$vux.confirm.show({
          // 组件除show外的属性
          theme:'android',
          title:'提示',
          content:'是否保存信息修改？',
          onCancel () {
            _this.updateForm.userNickname =  _this.userInfo.userNickname;
            _this.updateForm.userSex = _this.userInfo.userSex;
            _this.updateForm.userCustominfo6 = _this.userInfo.userCustominfo6;
            _this.updateForm.userIcon = _this.userInfo.userIcon;
            _this.isDisabled = true;
          },
          onConfirm () {
            let formData = {
              userNickname:_this.updateForm.userNickname,
              userSex:_this.updateForm.userSex,
              userCustominfo6:_this.updateForm.userCustominfo6,
              userIcon:_this.updateForm.userIcon
            }
            userController.updateRecord(formData).then(response=>{
              _this.isDisabled = true;
              if(response.success){ //修改资料成功
                  _this.$vux.toast.show({
                    text: response.msg,
                    type: 'text',
                    position: 'top'
                  })
                  userController.getLoginUserInfo().then(response=>{
                    _this.setUserInfo(response.data);// 更新用户信息
                  })
                }else{//修改资料失败
                  _this.$vux.toast.show({
                    text: response.msg,
                    type: 'warn'
                  })
                }
            }).catch(()=>{
              _this.isDisabled = true;
            })
          }
        })
      },
      openFile(){
          this.$refs.file.click();
      },
      fileChange(e){
        let file = e.target.files[0];
        let formData  = new FormData(); //创建form对象
        formData.append('pictureFile',file);//通过append向form对象添加数据
        formData.append('flag',1);

        uploadFileApi.uploadFile(formData).then(response=>{
          if(response.success){
            this.updateForm.userIcon = response.data.path;
          }else{
            this.$vux.toast.show({
              text: '头像上传失败',
              type:'warn'
              })
          }
        })
      },
    }
  }
</script>

<style scoped>
 .headerNav a{
    display: inline-block;
    width: 73.5px;
    height: 52px;
    line-height: 52px;
    text-align: right;
    padding-right: 20px;
  }
  .headerNav a.save{
    color:#f90;
  }
.center {
  padding-top: 20px;
  color: #fff;
  font-size: 18px;
}
.img_blur{
  height:150px;
}
.img_blur_bg{
  filter: blur(5px);
  width:100%;
  height:150px;
  background-size: cover !important;
  background-position: center !important;
}
.center img.touxiang {
  position:absolute;
  top:80px;
  left:50%;
  margin-left:-40px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 4px solid #ececec;
}
.center img.camera{
  position:absolute;
  top:80px;
  left:50%;
  margin-left:-40px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 4px solid #ececec;
  opacity:0.8;
}
.camera_input{
  position: absolute;
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  left:50%;
  top: 80px;
  margin-left: -40px;
  z-index: 999;
}
</style>
